<template>
  <dys-modal
    :open="open"
    :title="t('忘记密码')"
    :width="500"
    @cancel="emit('cancel')"
    :footer="false"
  >
    <div class="steps">
      <div :class="{ step: state.step > 0 }">{{ t("邮箱验证") }}</div>
      <div :class="{ step: state.step > 1 }">{{ t("重置密码") }}</div>
      <div :class="{ step: state.step > 2 }">{{ t("完成") }}</div>
    </div>
    <verify-email
      v-if="state.step === 1"
      ref="verifyEmailRef"
      @cancel="emit('cancel')"
      @next="
        state.email = verifyEmailRef?.modelRef.email;
        state.step++;
      "
    ></verify-email>
    <reset-password
      v-else-if="state.step === 2"
      :email="state.email"
      @next="state.step++"
    ></reset-password>
    <reset-complete v-else @cancel="emit('cancel')"></reset-complete>
  </dys-modal>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import VerifyEmail from "./verify-email.vue";
import ResetPassword from "./reset-password.vue";
import ResetComplete from "./reset-complete.vue";
import { useI18n } from "vue-i18n";
interface Props {
  /**弹窗 */
  open: boolean;
}
const props = defineProps<Props>();
const emit = defineEmits(["cancel"]);
const { t } = useI18n();
const initState = () => {
  return {
    step: 1,
    email: null,
  };
};
const state = reactive(initState());
const verifyEmailRef = ref<InstanceType<typeof VerifyEmail> | null>(null);
watch(
  () => props.open,
  () => {
    if (props.open) {
      verifyEmailRef.value?.resetFields();
      Object.assign(state, initState());
    }
  }
);
</script>
<style lang="less" scoped>
.steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  background-color: #eeeeee;
  border-radius: 4px;
  overflow: hidden;
  div {
    flex: 1;
    text-align: center;
    color: #333;
    line-height: 32px;
    cursor: pointer;
  }
  .step {
    color: #ffffff;
    background-color: @primary-color;
  }
}
</style>
